<template>
  <div class="container">
    <div class="content-container"></div>
    <div class="login-container">
      <div class="left-box">
        <img class="text1" src="https://img.js.design/assets/img/67112eb20c8862f00fe90c66.png#7d2edbf504c70101b6f420fa84a0e523" alt="">
        <div class="text2">智选服务</div>
        <div class="text3">务实生活</div>
        <div class="text4">致力于为用户打造一个高效、可靠的服务匹配平台，
          通过丰富的服务选项和智能匹配技术，让用户迅速找到合适的服务</div>
      </div>
      <div class="login-title">
        <!-- 验证码登录、注册 -->
        <div class="box"
             :class="{ active: activeTab === 'verify' }"
             @click="setActiveTab('verify')"
             style="left: 0"
        >
          <div class="title">登录/注册</div>
          <div class="bottom-line" v-show="activeTab === 'verify'"></div>
        </div>
        <!-- 密码登录 -->
        <div class="box"
             :class="{ active: activeTab === 'password' }"
             @click="setActiveTab('password')"
             style="right: 0"
        >
          <div class="title">密码登录</div>
          <div class="bottom-line" v-show="activeTab === 'password'"></div>
        </div>
      </div>

      <!--验证码登录、注册表单-->
      <div id="verify-form"
           class="login-form"
           v-show="activeTab === 'verify'"
           @submit.prevent="">
        <!--手机号-->
        <div class="form-group">
          <select name="countryCode" id="countryCode">
            <option value="CN">+86</option>
            <option value="US">+1</option>
            <option value="UK">+44</option>
            <option value="AU">+61</option>
          </select>
          <div class="separator"></div>
          <input
              class="phone-input"
              type="text"
              id="username"
              v-model="phoneNumber"
              placeholder="请输入手机号"
              required
          />
        </div>
        <!--验证码-->
        <div class="form-group">
          <input class="verify-input" type="text"
            v-model="verificationCode" placeholder="请输入验证码" required
          />
          <button class="verify-send" :disabled="isLoading" @click="handleSendMsg">
            {{ isLoading ? '发送中...' : '发送验证码' }}
          </button>
        </div>
        <!--登录按钮-->
        <button class="login-button" :disabled="isLoading" @click="handleMsgLogin">
          {{ isLoading ? '登录/注册中...' : '登录/注册' }}
        </button>
        <!--勾选已确认用户协议-->
        <form  class="prompt-confirm">
          <input type="checkbox" id="prompt-confirm" name="prompt-confirm" required>
          <label for="prompt-confirm">
            <text>我已经阅读并同意</text>
            <text style="color: rgba(238, 113, 62, 1)">《用户协议》</text>
            <text>及</text>
            <text style="color: rgba(238, 113, 62, 1)">《隐私协议》</text>
            <br>
            <text>注：首次验证通过即注册智务网账号</text>
          </label>
        </form>
      </div>

      <!--密码登录表单-->
      <div id="password-form"
           class="login-form"
           v-show="activeTab === 'password'"
           @submit.prevent="handlePasswordLogin">
        <!--手机号-->
        <div class="form-group">
          <input
              class="phone-input"
              type="text"
              id="username"
              v-model="phoneNumberPassword"
              placeholder="请输入手机号"
              required
              style="border-radius: 11.667vw"
          />
        </div>
        <!--密码-->
        <div class="form-group">
          <input
              class="verify-input"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              required
          />
          <button class="password-find">找回密码</button>
        </div>
        <!--登录按钮-->
        <button class="login-button" :disabled="isLoading" @click="handlePasswordLogin">
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
        <!--勾选已确认用户协议-->
        <form  class="prompt-confirm">
          <input type="checkbox" id="prompt-confirm" name="prompt-confirm" required/>
          <label for="prompt-confirm">
            <text>我已经阅读并同意</text>
            <text style="color: rgba(238, 113, 62, 1)">《用户协议》</text>
            <text>及</text>
            <text style="color: rgba(238, 113, 62, 1)">《隐私协议》</text>
          </label>
        </form>
      </div>

      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    </div>
  </div>
</template>

<script>
import {ref, watch} from "vue";
import { passwordLogin } from '@/api/passwordLogin'; // 引入密码登录函数
import { sendMsg } from '@/api/sendMsg'; // 引入发送验证码函数
import { msgLogin } from '@/api/msgLogin'; // 引入验证码登录函数
export default {
  name: "LoginPage",
  setup() {
    const activeTab = ref("password");  // 用于控制登录方式（验证码/密码）
    const errorMessage = ref("");  // 存储错误信息
    const phoneNumber=ref()

    // 切换登录方式（验证码登录、密码登录）
    const setActiveTab = (tab) => {
      activeTab.value = tab;
    };

    // 密码登录请求
    const { handlePasswordLogin, phoneNumberPassword, password, isLoading } = passwordLogin();
    // 发送验证码请求
    const { handleSendMsg, phoneNumberVerify1, isSending } = sendMsg();
    // 验证码登录请求
    const { handleMsgLogin, phoneNumberVerify2, verificationCode, isLoading: isMsgLoading } = msgLogin();

    watch(phoneNumber, (newPhoneNumber) => {
      phoneNumberVerify1.value = newPhoneNumber;
      phoneNumberVerify2.value = newPhoneNumber;
    });

    return {
      activeTab,
      setActiveTab,
      phoneNumber,
      phoneNumberPassword,
      password,
      verificationCode,
      errorMessage,
      isLoading,
      handlePasswordLogin,
      phoneNumberVerify1,
      isSending,
      handleMsgLogin,
      phoneNumberVerify2,
      isMsgLoading,
      handleSendMsg
    };
  },
};
</script>


<style scoped>
.container{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 1;
  background: rgba(13, 127, 233,1);
}
.content-container{
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.4;
  background-image: url(https://img.js.design/assets/img/67126011e0f24202bd7b38e6.jpg#d6a994dc674792754e4055c0c873da62);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.login-container {
  position: absolute;
  left: 20.729vw;
  top: 16.759vh;
  width: 58.385vw;
  height: 63.7vh;
  opacity: 1;
  border-radius: 1.6667vw;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 1.198vw rgba(0, 95, 204, 0.9);
  backdrop-filter: blur(2.71vw);
}
.left-box{
  position: relative;
  left: 0;
  top: 0;
  width: 22.917vw;
  height: 63.7vh;
  border-radius: 1.6667vw 0 0 1.6667vw;
  background: rgba(199, 228, 255, 0.5);
}
.text1{
  position: absolute;
  left: 4.635vw;
  top: 5.092vh;
  width: 13.646vw;
  height: 6.852vh;
}
.text2{
  position: absolute;
  left: 5.937vw;
  top: 22.592vh;
  width: 11.042vw;
  height: 5.926vh;
  font-size: 2.5vw;
  font-weight: normal;
  letter-spacing: 0.2604vw;
  line-height: 3.290vw;
  color: rgba(13, 127, 233, 1);
  text-align: center;
  vertical-align: middle;
}
.text3{
  position: absolute;
  left: 5.937vw;
  top: 31.944vh;
  width: 11.042vw;
  height: 5.926vh;
  font-size: 2.5vw;
  font-weight: normal;
  letter-spacing: 0.2604vw;
  line-height: 3.290vw;
  color: rgba(13, 127, 233, 1);
  text-align: center;
  vertical-align: middle;
}
.text4{
  position: absolute;
  left: 3.593vw;
  top: 45.463vh;
  width: 15.781vw;
  height: 8.8889vh;
  font-size: 0.8333vw;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6667vw;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  vertical-align: middle;

}
.login-title{
  position: absolute;
  left: 32.0316vw;
  top: 10.5556vh;
  width: 14.896vw;
  height: 4.63vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
/* 标题盒子 */
.login-title .box {
  position: absolute;
  top: 0;
  width: 5.6771vw;
  height: 4.63vh;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.box .bottom-line {
  position: absolute;
  bottom: 0;
  width: 2.604vw;
  height: 0.370vh;
  border-radius: 0.1667vw;
  background: rgba(238, 113, 62, 1);
  transition: opacity 0.3s; /* 动画效果 */
  opacity: 1;
}
/* 标题 */
.title{
  position: absolute;
  left: 0;
  top: 0;
  width: 5.6771vw;
  height: 3.796vh;
  font-size: 1.25vw;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 3.2176vh;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  vertical-align: middle;
}
.box.active .title {
  color: rgba(32, 32, 32, 1);
  font-weight: bold;
}
/*登录表单*/
.login-form{
  position: absolute;
  right: 8.646vw;
  top: 20.741vh;
  width: 20.469vw;
  height: 22.222vh;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /*background-color: orange;*/
}
.form-group {
  width: 20.469vw;
  height: 5.0926vh;
  opacity: 1;
  border-radius: 11.667vw;
  margin-bottom: 3.472vh;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(217, 217, 217, 1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
select {
  /*-webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;*/
  border: transparent;
  color: #333;
  font-size: 0.9vw;
  width: 3.8vw;
  height: 5.0926vh;
  border-bottom-left-radius: 11.667vw;
  border-top-left-radius: 11.667vw;
  padding-left: 0.260vw;
}
.separator{
  position: absolute;
  left: 3.68vw;
  width: 1.3px;
  height: 2.8vh;
  background-color: rgba(217, 217, 217, 1);
}
.phone-input {
  width: 100%;
  height: 5.0926vh;
  right: 0;
  border-bottom-right-radius: 11.667vw;
  border-top-right-radius: 11.667vw;
  padding-left: 0.8vw;
  border: transparent;
  box-sizing: border-box;
  font-size: 0.9vw;
}
.phone-input:focus{
  outline:none
}
.verify-input{
  width: 100%;
  height: 5.0926vh;
  left: 0;
  border-bottom-left-radius: 11.667vw;
  border-top-left-radius: 11.667vw;
  padding-left: 0.8vw;
  border: transparent;
  box-sizing: border-box;
  font-size: 0.9vw;
}
.verify-send{
  width: 8vw;
  height: 5.0926vh;
  right: 0;
  border-bottom-right-radius: 11.667vw;
  border-top-right-radius: 11.667vw;
  padding-right: 0.5vw;
  border: transparent;
  box-sizing: border-box;
  font-size: 0.9vw;
  color: rgba(238, 113, 62, 1);
  background-color: rgba(255, 255, 255, 1);
}
.password-find{
  position: relative;
  width: 6vw;
  height: 5.0926vh;
  right: 0.15vw;
  border-bottom-right-radius: 11.667vw;
  border-top-right-radius: 11.667vw;
  padding-right: 0.5vw;
  border: transparent;
  box-sizing: border-box;
  font-size: 0.9vw;
  color: rgba(238, 113, 62, 1);
  background-color: rgba(255, 255, 255, 1);
}
.login-button {
  width: 100%;
  height: 7vh;
  padding: 0.512vw;
  margin-bottom: 3.75vh;
  font-size: 0.9vw;
  letter-spacing: 3px;
  color: #fff;
  border: none;
  border-radius: 15.208vw;
  cursor: pointer;
  background: linear-gradient(230.13deg, rgba(0, 95, 204, 1) 0%, rgba(13, 127, 233, 1) 100%);
}

.login-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.login-button:hover {
  background-color: #38a673;
}

.error {
  color: red;
  margin-top: 0.926vh;
}
.prompt-confirm{
  position: relative;
  width: 14.3vw;
  height: 5vh;
  justify-items: center;
}
.prompt-confirm label{
  position: absolute;
  left: 1.15vw;
  top: 0.5vh;
}
.prompt-confirm text{
  position: relative;
  height: 1.48vh;
  opacity: 1;
  font-size: 0.625vw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.48vh;
  color: rgba(102, 102, 102, 1);
  text-align: left;
  vertical-align: top;
}
.prompt-confirm input{
  position: absolute;
  left: 0;
  top: 0;
  width: 0.625vw;
  height: 0.625vw;
  border-radius: 0.104vw;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(217, 217, 217, 1);
}
.prompt-confirm input[type=checkbox]:checked::after{
  /*content: "✓";*/
  left: 0;
  top: 0;
  width: 0.625vw;
  height: 0.625vw;
  color: rgba(238, 113, 62, 1);
  background: rgba(238, 113, 62, 1);
}
.prompt-confirm input:focus{
  outline:none
}


/*输入框选中后的效果*/
input:focus{
  outline:1px solid rgba(238, 113, 62, 1)
}
.form-group:focus-within {
  border-color: rgba(238, 113, 62, 1);
}
::placeholder{
  color: rgba(217, 217, 217, 1);
}
</style>
